<template>
  <!-- 弹窗 -->
  <el-dialog v-model="dialogVisible" :show-close="false" :title="title" :close-on-click-modal="false" width="20%">
    <el-card>
      <el-form ref="ruleFormRef" style="max-width: 300px" :model="ruleForm" status-icon :rules="rules"
        label-width="auto" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input v-model="ruleForm.idNumber" />
        </el-form-item>
        <el-form-item label="月薪" prop="monthlySalary" type="password">
          <el-input v-model="ruleForm.monthlySalary" />
        </el-form-item>
        <el-form-item style="margin-left: 100px;">
          <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
          <el-button type="primary" @click="cancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, defineExpose,defineProps } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const props=defineProps({
  onSubmit:Function
})
const dialogVisible = ref(false)
const isadd = ref()
const title = ref('')
function changeDialogVisible(val: boolean) {
  if (val === true) {
    title.value = "新增员工"
  }
  if (val === false) {
    title.value = "修改员工信息"
  }
  dialogVisible.value = true
  isadd.value = val;

}
import { nextTick } from 'vue';
function editFormData(row: any) {

  nextTick(() => {
    ruleForm.id = row.id
    ruleForm.name = row.name
    ruleForm.phone = row.phone
    ruleForm.sex = row.sex
    ruleForm.idNumber = row.idNumber
    ruleForm.monthlySalary = row.monthlySalary
  })
}
defineExpose({
  changeDialogVisible,
  editFormData
})
//表单
const ruleFormRef = ref<FormInstance>()

const checkName = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入姓名！'))
  }
  if (! /^[\u4e00-\u9fa5]+$/.test(value)) {
    callback(new Error('请输入汉字!'))
  } else {
    if (value.length < 2 || value.length > 10) {
      callback(new Error('姓名不小于2个汉字,不大于10个汉字! '))
    } else {
      callback()
    }
  }
}
const checkPhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入手机号!'))
  }
  if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error('请填写正确的手机号!'))
  } else {
    callback()
  }
}
const checkIdNumber = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入身份证号!'))
  } else if (!/^(^\d{15}$|^\d{17}([0-9]|X)$)$/.test(value)) {
    callback(new Error('请输入正确的身份证号!'))
  } else {
    callback()
  }
}
const checkMonthlySalary = (rule: any, value: any, callback: any) => {
  if (value === null || value === '') {
    callback(new Error('请输入月薪!'))
  } else if (!/^\d+(\.\d{1,2})?$/.test(value)) {
    callback(new Error("月薪格式有误，请输入大于零且最多保留两位小数的金额!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  id: null,
  name: '',
  phone: '',
  sex: '',
  idNumber: '',
  monthlySalary: null,
})

const rules = reactive<FormRules<typeof ruleForm>>({
  name: [{ validator: checkName, trigger: 'blur' }],
  phone: [{ validator: checkPhone, trigger: 'blur' }],
  sex: [{ required: true, message: '请设置性别!', trigger: 'change' },],
  idNumber: [{ validator: checkIdNumber, trigger: 'blur' }],
  monthlySalary: [{ validator: checkMonthlySalary, trigger: 'blur' }],
})
import { addEmployee } from '@/apis/employee.js'
import { ElMessage } from 'element-plus'

import { updateEmployee } from '@/apis/employee.js'
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      if (isadd.value === true) {
        //提交添加请求
        const res = await addEmployee(ruleForm)
        console.log(res.data.code);
        if (res.data.code === 0) {
          ElMessage.error(res.data.msg)
          return
        }
        ElMessage.success("添加成功")
        dialogVisible.value = false

        //刷新表格
        props.onSubmit()
        resetForm(formEl)
        console.log('submit!')
      } else {
        //提交 修改请求
        const res = await updateEmployee(ruleForm)
        console.log(res.data.code);
        if (res.data.code === 0) {
          ElMessage.error(res.data.msg)
          return
        }
        ElMessage.success("修改成功")
        dialogVisible.value = false
        resetForm(formEl)
        //刷新表格
        props.onSubmit()
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}
function cancel() {
  dialogVisible.value = false
  resetForm(ruleFormRef.value)
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>